<template>
<div class="sidebar" v-bind:class="classToggle" >

    <div class='sliderContent' @mouseenter="toggleCollapse('2')" @mouseleave="toggleCollapse('2')">
        <!--<a href="#/home/homepage" class="logo">
            <span class="logo-mini"><i class="fa fa-book mini" aria-hidden="true"></i></span>
            <span class="logo-lg"><i class="fa fa-book" aria-hidden="true"></i> <b>招商局</b>HR系统</span>
        </a>-->
        <router-link  class="logo"  to="/home/homepage">
            <span class="logo-mini"><i class="fa fa-book mini" aria-hidden="true"></i></span>
            <span class="logo-lg"><b>招商局集团 </b>HR门户</span>  	
        </router-link>         
        <div class='main-sider' >
            <div class='topTitle'>导航栏</div>
            <div class="barBox">
                <el-menu ref="menuTal"   :defaultActive.sync="defaultActiveTest" :default-openeds="defaultOpenMenuTest" :unique-opened="bol" class="el-menu-vertical-demo" >

                    <!--<el-submenu  :index="menuIndexFilter(item2.menuSort)" v-for="item2 in menuData" :key="item2.menuSort" v-if="item2.childList.length>0?true:false">
                        <template slot="title"><a class="router"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.menuName}}</a></template>
                        <el-menu-item :index="menuIndexFilter(item2.menuSort,item3.menuSort)" v-for="item3 in item2.childList"><router-link class="router" :to="item3.menuUrl+'&target='+menuIndexFilter(item2.menuSort,item3.menuSort)"><i class="fa" :class="item3.menuIconCls" aria-hidden="true"></i>{{item3.menuName}}</router-link></el-menu-item>                          
                    </el-submenu>
                    <el-menu-item :index="menuIndexFilter(item2.menuSort)"  :key="item2.menuSort" v-else><router-link class="router" :to="item2.menuUrl"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.menuName}}</router-link></el-menu-item>   -->
                    <v-tree ref="menuTalTree"  :value="menuDataTest"></v-tree>

                </el-menu>
            </div>
        </div>
        <div class='mini-menu'>
            <ul>
                <li><a ><i class="fa fa-book"></i></a></li>
                <li><a ><i class="fa fa-user"></i></a></li>
            </ul>  
        </div>
    </div>

    
    <!-- <a  class='collapseBtn' v-on:click="toggleCollapse('1')"><i class="fa fa-bars" aria-hidden="true"></i></a> -->
</div>

</template>

<script>
    // import 'Mock/mock_data'
    import Vue from 'vue'
	import {  Menu, Submenu, MenuItem, MenuItemGroup, Row} from 'element-ui' 
	Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItem)
    Vue.use(MenuItemGroup)
    Vue.use(Row)

    import Left from '@/components/public/leftNav-child1'
    export default {
        name:'leftBar',
        data(){
            return {
                menuData : null,
                bol:true,
                isBig:true,
                isCollapse:false,
                count:0,
                menu:null,


            }
        },
        computed: {
            classToggle: function () {
                return {
                'mini-slider': !this.isBig,
                'big-slider': this.isBig,
                'collapsed':this.isCollapse
                }
            },
            defaultActive :function(){
               
                var target = this.$route.query.target;
 
                if (!target ) {
                    if (!this.menuData) {
                        console.log(this.menuData,'this.menuData');
                        return '';
                    }
                    console.log(this.menuData,'this.menuData');
                    if (this.menuData.length > 0) {
                    	
//                  	if (this.iterateGaoGuanMenu(result)) {
//                  		this.$router.push('/home/homepage?leaderType=B&target=76-79');
//                  		this.defaultActiveTest = '76-79';
//		                	self.menuDataTest = res.data.datas.userHrMenuList;
//          	
//          				this.isShowLeft = true;
//                  		return;
//                  		
//                  	}
//                  	
                        if (this.menuData[0].childList && this.menuData[0].childList.length > 0){
                           
                            this.menu = this.menuData[0].id;
                            var type = this.menuData[0].mark;
                           
                            
                            var node = this.iterateMenu(this.menuData[0].childList)
                            if (node.menuUrl.indexOf('?')) {
                                var url = node.menuUrl+'&target=' + this.menu + '&type=' + type
                            } else {
                                var url = node.menuUrl+'?target=' + this.menu + '&type=' + type
                            }
                             console.log(this.menu,"this.menu");
                            this.$router.push(url);
                            
                            return this.menu;

                        }else {

                            
                            this.$router.push(this.menuData[0].menuUrl+'?target=' + this.menuData[0].id + '&type=' + this.menuData[0].mark);

                             return this.menuData[0].id + '';
                        }
                    }

                } else {
                    return target;
                }

            },
            defaultOpenMenu: function(){
                if (!this.menu || this.menu.indexOf('-') === -1) {
                    return [];
                }
                
                return [this.menu.split('-')[0]];
      
            }
        },
        props:{
            isChangeBigWidth:{
                type:Boolean,
                default:false
            },
            menuDataTest:{
            	type:Array,
            	default:function(){
            		return [];
            	}
            },
            defaultActiveTest:{
            	type:String,
            	default:'',
            },
            defaultOpenMenuTest:{
            	type : Array,
				default:function(){
            		return [];
            	}
            }
       },
        methods:{
            menuIndexFilter(_index,_index2){
	    		if(!_index2){
	    			return ""+_index;
	    		}
	    		return _index+"-"+_index2;
            },
            iterateMenu:function(data) {
                console.log(data,'data');
                if (data[0].childList && data[0].childList.length > 0) {
                    this.menu = this.menu + '-' + data[0].id;
                    console.log(this.menu,"this.menu one");
                    this.iterateMenu(this.data[0]);
                } else {
                    this.menu = this.menu + '-' + data[0].id;
                     console.log(this.menu,"this.menu two");
                    return data[0];
                }
            },
            alterToggleWidth(){
                this.isBig = this.isBig ? false : true;
            },
            alterCollspseClass(){
                this.isCollapse = this.isCollapse ? false : true;
            },
            toggleCollapse(type){
                if (type === '2') {
                    if (this.isCollapse) {
                       this.alterToggleWidth();
                    } else {
                        return;
                    }
                } else { 
                    this.alterToggleWidth();
                    this.alterCollspseClass();
                }
                console.log(this.isChangeBigWidth,'me');
                this.$emit('update:isChangeBigWidth', !this.isBig)
//              this.$emit('update:isChangeBigWidth', !this.isChangeBigWidth)
//              this.$emit('test', !this.isChangeBigWidth)
            },

          
        },
        components:{
            'v-tree':Left
        },
        created:function(){


        },
        mounted(){

        }


    
}
</script>

<style scoped>


    .sidebar {
        position: fixed;
        top:0;
        left: 0;
        bottom: 0;

        color:#fff;
        z-index:1100;
    }


    .sidebar .collapseBtn{
        position: absolute;
        width:16px;
        height:16px;
        top: 0px;
        right: -46px;
        z-index: 1079;
        padding: 17px 15px 17px 15px;
        display: inline-block;
        background-color: #0268b3;
    }
    .sidebar .collapseBtn:hover{				
		background: rgba(0, 0, 0, 0.1);		
	}	
    .sidebar .main-sider .topTitle{
        color: #848484;
        padding: 60px 25px 10px 15px;
        font-size: 12px;
    }
    .sliderContent{
        position: absolute;
        top: 0;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        bottom: 0;
    }
        /*滚动条样式*/
    .sliderContent::-webkit-scrollbar {
        width: 2px;     
        height: 2px;
    }
    /*.sliderContent::-webkit-scrollbar {
		display: none;
    }*/
    .sliderContent::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(60,141,188,0.4);
        background: rgba(60,141,188,1);
    }
    .sliderContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.7);
        border-radius: 0;
        background: rgba(60,141,188,0.7);
    }
    .sliderContent{ 
        scrollbar-arrow-width:2px; 
        scrollbar-arrow-color:#0268b3;  
        scrollbar-face-color: #0268b3;  
        scrollbar-3dlight-color: #0268b3; 
        scrollbar-highlight-color: #0268b3;  
        scrollbar-shadow-color: #0268b3;  
        scrollbar-darkshadow-color: #0268b3;  
        scrollbar-track-color: #0268b3; 
        scrollbar-base-color:#0268b3;  
    } 
    .big-slider{
        width: 230px;
        overflow: hidden;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .big-slider .router{
        display: inline-block;
        width: 100%;
        height: 100%;
        margin-left: -25px;
        padding: 0px 45px 0px 25px ;
    }

    .big-slider .sliderContent{
        width: 250px;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .mini-slider .sliderContent{
        width: 70px;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .mini-slider {
        width: 50px;
        overflow: hidden;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .mini-slider .main-sider{
        display: none;
        opacity: 0;
        transition: all 0.4s ease-in-out;
    }
    .mini-slider .barBox{
        width: 50px;
        overflow: hidden;
        transition: width 0.4s ease-in-out;
    }
    .big-slider .barBox{
        width: 230px;
        overflow: hidden;
        transition: width 0.4s ease-in-out;
    }
    .big-slider .main-sider{
        display: block;
        opacity: 1;
        transition: all 0.4s ease-in-out;
    }
    .big-slider .mini-menu{
        display: none;
    }
    .mini-slider .mini-menu{
        display: block;
    }    
    .big-slider .logo{
        background-color: #0268b3;
        color: #ffffff;
        border-bottom: 0 solid transparent;
        transition: width 0.4s ease-in-out;
        display: block;
        float: left;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        width: 200px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 300;
        overflow: hidden;
        position:fixed;
        top:0;
        padding: 0px 35px 0px 15px;
        z-index:1200;
    }
   .mini-slider .logo{
        background-color: #0268b3;
        color: #ffffff;
        border-bottom: 0 solid transparent;
        transition: width 0.4s ease-in-out;
        display: block;
        float: left;
        height: 18px;
        font-size: 18px;
        line-height: 18px;
        text-align: center;
        width: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        padding: 16px 35px 16px 15px;
        font-weight: 300;
        overflow: hidden;
        position:fixed;
        top:0;
        z-index:1200;
    }
    .big-slider .logo .logo-mini{
        display:none;
    }

    .mini-slider .logo .logo-mini{
        display:block;
    }
			
    .mini-slider .logo .logo-lg{
        display:none;
    }
    .mini-slider .mini-menu{
        font-weight: 600;
        color:#000;	
        text-align: center;
        margin-top: 50px;
    }
    .mini-slider .mini-menu a{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .mini-slider .mini-menu li{
        line-height: 50px;
        height:50px;
    }


</style>
<style>
    .main-sider .el-menu{
        background-color: #fbfdff;
    }
    .main-sider .el-menu .is-opened,.main-sider .el-menu .is-opened .el-menu{
        background-color: #fbfdff;
    }
    .sidebar .main-sider .el-submenu .el-submenu__title{
        font-weight: 600;
    }
    .main-sider .el-menu .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
        -ms-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    .main-sider .el-menu .el-submenu>.el-submenu__title .el-submenu__icon-arrow {
        -ms-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    .barBox>.el-menu>div>.el-submenu .el-menu>div>.el-menu-item{
        padding-left: 20px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 20px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 25px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 30px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title,.barBox>.el-menu>div>.el-menu-item{
        padding-left: 15px !important;
    }
    
    .barBox>.el-menu>div>li.el-menu-item>a{
    	font-weight: 600;
    }

    /*.barBox>.el-menu>div>.el-submenu:nth-child(4)>.el-submenu__title+.el-menu>div>li:not(:nth-child(2)){
       display: none;
    }*/
    
</style>



